<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<!-- ios私有meta类 -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />	
	
	<!--引用SUI Modle资源-->
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.2/css/sm-extend.min.css">
	
		
	<!--引入本地文件-->
	<link rel="stylesheet" href="css/reset.css" type="text/css">
	<link rel="stylesheet" href="css/normalize.css" type="text/css">
	<link rel="stylesheet" href="css/place_add.css" type="text/css">

	
	<title>添加地址</title>
</head>
<body>
	<div class="page">
		<!--页面头部-->
		<header class="bar bar-nav">
			<a href="place.html" class="icon icon-left pull-left external"></a>
			<h1 class="title">添加地址</h1>
			<a href="index.html" class="icon icon-home pull-right external"></a>
		</header>
		
		<!--主要部分 开始-->
		<div class="content">
			<div class="list-block placeAdd-list">
				<ul>
					<!--姓名 开始-->
					<li>
						<div class="item-content">
							<div class="item-media"><i class="icon icon-card"></i></div>
							<div class="item-inner">
								<div class="item-title label">收货人</div>
								<div class="item-input">
									<input type="text" placeholder="请输入收货人姓名">
								</div>
							</div>
						</div>
					</li>
					<!--姓名 结束-->
					
					<!--手机 开始-->
					<li>
						<div class="item-content">
							<div class="item-media"><i class="icon icon-phone"></i></div>
							<div class="item-inner">
								<div class="item-title label">手机号码</div>
								<div class="item-input">
									<input type="text" placeholder="请输入收货人手机号码">
								</div>
							</div>
						</div>
					</li>
					<!--手机 结束-->
					
					<!--地区 开始-->
					<li>
						<div class="item-content">
							<div class="item-media"><i class="icon icon-browser"></i></div>
							<div class="item-inner">
								<div class="item-title label">地区选择</div>
								<div class="item-input">
									<input type="text" id='city-picker' value="广东 广州 花都区"/>
								</div>
							</div>
						</div>
					</li>
					<!--地区 结束-->
					
					<!--地址 开始-->
					<li>
						<div class="item-content">
							<div class="item-media"><i class="icon icon-phone"></i></div>
							<div class="item-inner">
								<div class="item-title label">详细地址</div>
								<div class="item-input">
									<input type="text" placeholder="请输入收货人详细地址">
								</div>
							</div>
						</div>
					</li>
					<!--地址 结束-->
				</ul>
			</div>
			
			<div class="placeAdd-button">
				<div class="button button-dark" ">保存新地址</div>
			</div>
			
		</div>
		<!--主要部分 结束-->
	</div>
	
	
	<!--引用SUI Modle资源-->
	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script type="text/javascript" src="//g.alicdn.com/msui/sm/0.5.4/js/sm-city-picker.min.js" charset="utf-8"></script>
	<script>
		$("#city-picker").cityPicker({
			toolbarTemplate: '<header class="bar bar-nav">\
			<button class="button button-link pull-right close-picker">确定</button>\
			<h1 class="title">选择收货地址</h1>\
			</header>'
		});
	</script>

</body>
</html>